<template>
    <div>
        <ul>
            <li>长度{{ this.tdict.length }}</li>
            <li v-for="(item,index) in tdict" :key="index">
         {{ item.name }}
            </li>
        </ul>
        <!-- 测试watch的特性 -->
        <button @click="change">修改tdict</button>
        <button @click="change1">添加一个</button>
        <button @click="change2">删除一个</button>
    </div>
    
</template>
<script>
export default {
    props:["dict"],
    methods:{
      change(){
        //   vue 2.6.11wacth不在有重复执行的问题
        this.tdict[0].name=2020
          this.tdict[1].name=2021
          this.tdict[2].name=2022
          this.tdict[3].name=2023
          this.tdict[4].name=2024
      },
      change1(){
        //   vue 2.6.11wacth不在有重复执行的问题
          this.tdict.push({name})
      },
      change2(){
        //   vue 2.6.11wacth不在有重复执行的问题
         this.tdict.pop()
      },
    },
   data(){
       return{
           tdict:[],
       }
   },
   watch:{
       dict:{
           deep:true,
           handler(data){
               console.log(data)
            
            //    把数组类型转换成对象
           this.tdict=data.map((item)=>{
               return Object.fromEntries([item])
           });
           },
        //    第一次默认执行
        immediate:true
       },
       tdict:{
            deep:true,
              handler(value){
               console.log(value)
      }
       }
   },
}
</script>